@import "common";
div.side-fixed-bar{
  width: 52px; height: (52px * 3) + (10px * 3);
  //background-color: red;
  font-family: @YaHei-font-family;
  position: fixed;
  bottom: 100px;
  right: 10px;
  z-index: 9999999;
  div.btn-warpper{
    width: 52px; height: (52px * 3) + (10px * 3);
    float: left;
    a.go-top{
      display: none;
      background: transparent url(../images/side-fixed-bar.png) no-repeat 0 -134px;
      &:hover{
        background-position: 0 -201px;
      }
    }
    a.qq-online{
      background: transparent url(../images/side-fixed-bar.png) no-repeat 0 -266px;
      &:hover{

        background-position: 0 -333px;
      }
    }
    a.dimensional-code-btn{
      background: transparent url(../images/side-fixed-bar.png) no-repeat 0 0;
      &:hover{
        background-position: 0 -67px;
      }
    }
    // common
    a.fixed-bar-btn{
      width: 52px; height: 52px;
      display: block;
      float: left;
      margin-bottom: 10px;

      //background-color: red;
    }
  }
  .dimensional-code-info{
    position: relative;
    top: -220px;
    left: -268px;
    width: 258px;
    height: 262;
    z-index: 1200;
    display: none;
  }
  div.kefu-warpper{
    //background: yellowgreen;
    ul.customer-service-list{
      position: relative;
      top: 0px;
      left: 70px;
      list-style: none;
      height: 53px; width: 250px;
      li{
        position: absolute;
        left: 0px;
        top: 0;
        height: 53px; width: 250px;
        background: transparent url('../images/customer-service-01.png') no-repeat left center;
        margin-bottom: 5px;
        opacity: 0.0;
        &:first-child{
          opacity: 1.0;
        }
        div.left-part{
          float: left;
          width: 60px; height: 53px;
          margin-right: 2px;
          //background-color: royalblue;
          .type{
            color: #000;
            width: 60px; height: 53px;
            line-height: 53px;
            text-align: center;
          }
        }
        div.right-part{
          height: 53px; @right-part: (250px - 60px - 2px);
          width: @right-part;
          //background-color: red;
          float: left;
          .top-bar{
            height: (28px - 4px);
            padding-top: 4px;
            width: @right-part;
            .name{
              font-size: 14px;
              height: 28px;
              width: 90px;
              float: left;
              a{
                color: #000000;
                text-decoration: none;
                display: block;
                padding-left: 38px;
                &:hover{
                  color: @base-blue-color;
                }
              }
            }
            .status{
              //background-color: red;
              padding-left: 37px;
              font-size: 14px;
              height: 28px;
              width: (@right-part - 90px - 37px);
              float: left;
            }
          }
          .email{
            padding-left: 38px;
            font-size: 12px;
            height: 25px;
            //background-color: red;
            line-height: 15px;
          }

        }
      }
    }
  }
}